
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人页面</title>
  <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css">

  <style>
    /* 重置所有元素的外边距、内边距和盒模型 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    /* 设置页面的背景图片和颜色 */
    body {
      color: #fff;
      background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.fe2cb92a9809a66b8ea0b5046d1ed9aa?rik=%2fV8LlDUqV6ALpg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1308%2f17%2fc2%2f24561028_1376699679461.jpg&ehk=B6h1WTUP7MXtzYqgUfEXmcFR2epNpUivg8Ev2udBFXA%3d&risl=&pid=ImgRaw&r=0);
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment:fixed;


    }

    /* 设置导航栏的样式 */
    .header {
      position: fixed;
      /* 将导航栏固定在页面顶部 */
      top: 0;
      left: 0;
      width: 100%;
      padding: 20px 10%;
      /* 设置导航栏内边距 */
      background: transparent;
      /* 设置导航栏背景为透明 */
      display: flex;
      /* 将导航栏的子元素设置为flex布局 */
      justify-content: space-between;
      /* 将导航栏子元素分散对齐 */
      align-items: center;
      /* 将导航栏子元素垂直居中对齐 */
      z-index: 100;
      /* 将导航栏设置为最上层 */
    }

    /* 设置导航栏Logo的样式 */
    .logo {
      font-size: 25px;
      /* 设置字体大小 */
      color: #fff;
      /* 设置字体颜色 */
      text-decoration: none;
      /* 取消下划线 */
      font-weight: 600;
      /* 设置字体粗细 */
      cursor: default;
      /* 设置鼠标样式为默认 */
      opacity: 0;
      /* 设置初始透明度为0 */
      animation: slideRight 1s ease forwards;
      /* 设置动画效果 */
    }




    /* 设置导航栏链接的样式 */
    .navbar a {
      display: inline-block;
      /* 将链接设置为块级元素 */
      font-size: 18px;
      /* 设置字体大小 */
      color: #fff;
      /* 设置字体颜色 */
      text-decoration: none;
      /* 取消下划线 */
      font-weight: 500;
      /* 设置字体粗细 */
      margin-left: 35px;
      /* 设置左侧间距 */
      opacity: 0;
      /* 设置初始透明度为0 */
      transition: 0.3s;
      /* 设置过渡效果 */
      animation: slideTop 1s ease forwards;
      /* 设置动画效果 */
      animation-delay: calc(.2S * var(--i));
      /* 设置动画延迟时间 */
    }

    /* 设置导航栏链接的鼠标悬停和点击样式 */
    .navbar a:hover,
    .navbar a:active {
      color: #b7b2a9;
      /* 设置字体颜色 */
    }

    /* 设置首页的样式 */
    .home {
      position: relative;
      /* 设置为相对定位，用于子元素定位 */
      width: 100%;
      height: 100vh;
      /* 设置高度为视口高度 */
      display: flex;
      /* 将子元素设置为flex布局 */
      justify-content: space-between;
      /* 将子元素分散对齐 */
      align-items: center;
      /* 将子元素垂直居中对齐 */
      padding: 70px 10% 0;
      /* 设置内边距 */
    }

    /* 设置首页内容的样式 */
    .home-content {
      max-width: 600px;
      /* 设置最大宽度 */
    }

    /* 设置首页标题的样式 */
    .home-content h3 {
      font-size: 32px;
      /* 设置字体大小 */
      font-weight: 700;
      /* 设置字体粗细 */
      opacity: 0;
      /* 设置初始透明度为0 */
      animation: slideBottom 1s ease forwards;
      /* 设置动画效果 */
      animation-delay: .7s;
      /* 设置动画延迟时间 */
    }


    /* 设置首页标题中的颜色 */
    .home-content h3 span {
      color: #b7b2a9;
    }

    .text {
      /* 添加光标效果 */
      border-right: 2px solid white;
      /* 添加光标闪烁效果 */
      animation: blink 0.5s step-end infinite;
    }

    /* 设置首页内容标题的样式 */
    .home-content h3:nth-of-type(2) {
      margin-bottom: 30px;
      /* 设置下方间距 */
      animation: slideTop 1s ease forwards;
      /* 设置动画效果 */
      animation-delay: .7s;
      /* 设置动画延迟时间 */
    }

    /* 设置首页内容主标题的样式 */
    .home-content h1 {
      font-size: 56px;
      /* 设置字体大小 */
      font-weight: 700;
      /* 设置字体粗细 */
      margin: -3px 0;
      /* 设置上下间距 */
      opacity: 0;
      /* 设置初始透明度为0 */
      animation: slideRight 1s ease forwards;
      /* 设置动画效果 */
      animation-delay: 1s;
      /* 设置动画延迟时间 */
    }

    /* 设置首页内容段落的样式 */
    .home-content p {
      font-size: 18px;
      /* 设置字体大小 */
      animation: slideLeft 1s ease forwards;
      /* 设置动画效果 */
      animation-delay: .7s;
      /* 设置动画延迟时间 */
    }

    /* 设置首页图片的样式 */
    .home-img img {
      max-width: 450px;
      /* 设置最大宽度 */
      border-radius: 50%;
      /* 设置圆角 */
      margin-right: -20px;
      /* 设置右侧间距 */
      box-shadow: 0 0 20px #b7b2a9;
      /* 设置阴影效果 */
      opacity: 0;
      /* 设置初始透明度为0 */
      animation: zoomIn 1s ease forwards, floatImg 4s ease-in-out infinite;
      /* 设置动画效果 */
      animation-delay: 2s 3s;
      /* 设置动画延迟时间 */
    }

    /* 设置社交媒体图标的样式 */
    .social-media a {
      display: inline-flex;
      /* 将链接设置为flex布局 */
      justify-content: center;
      /* 将子元素水平居中对齐 */
      align-items: center;
      /* 将子元素垂直居中对齐 */
      width: 40px;
      /* 设置宽度 */
      height: 40px;
      /* 设置高度 */
      background: transparent;
      /* 设置背景为透明 */
      border: 2px solid #b7b2a9;
      /* 设置边框样式 */
      color: #b7b2a9;
      /* 设置字体颜色 */
      text-decoration: none;
      /* 取消下划线 */
      font-size: 20px;
      /* 设置字体大小 */
      margin: 30px 15px 30px 0;
      /* 设置外边距 */
      transition: 0.5s ease;
      /* 设置过渡效果 */
      opacity: 0;
      /* 设置初始透明度为0 */
      animation: slideLeft 1s ease forwards;
      /* 设置动画效果 */
      animation-delay: calc(0.2s * var(--i));
      /* 设置动画延迟时间 */
    }



    /* 设置社交媒体图标的鼠标悬停样式 */
    .social-media a:hover {
      background: #b7b2a9;
      /* 设置背景颜色 */
      color: #1f252d;
      /* 设置字体颜色 */
      box-shadow: 0 0 20px #b7b2a9;
      /* 设置阴影效果 */
    }


    /* 设置按钮的样式 */
    .btn {
      display: inline-block;
      /* 将按钮设置为块级元素 */
      padding: 12px 28px;
      /* 设置内边距 */
      background: #b7b2a9;
      /* 设置背景颜色 */
      text-decoration: none;
      /* 取消下划线 */
      border-radius: 40px;
      /* 设置边框圆角 */
      box-shadow: 0 0 10px #b7b2a9;
      /* 设置阴影效果 */
      font-size: 16px;
      /* 设置字体大小 */
      color: #1f252d;
      /* 设置字体颜色 */
      letter-spacing: 1px;
      /* 设置字间距 */
      font-weight: 600;
      /* 设置字体粗细 */
      transition: 0.5s ease;
      /* 设置过渡效果 */
      opacity: 0;
      /* 设置初始透明度为0 */
      animation: slideTop 1s ease forwards;
      /* 设置动画效果 */
      animation-delay: 2s;
      /* 设置动画延迟时间 */
    }



    /* 设置按钮的鼠标悬停样式 */
    .btn:hover {
      box-shadow: 0 0 20px #b7b2a9;
      /* 设置阴影效果 */
    }

    /* 设置按钮的鼠标点击样式 */
    .btn:active {
      background: none;
      /* 设置背景为透明 */
      color: #b7b2a9;
      /* 设置字体颜色 */
      border: 2px solid #b7b2a9;
      /* 设置边框样式 */
    }


    /*动画*/
    @keyframes blink {

      from,
      to {
        border-color: transparent;
        /* 透明边框颜色 */
      }

      50% {
        border-color: white;
        /* 白色边框颜色 */
      }
    }

    /* 定义向右滑动的动画 */
    @keyframes slideRight {
      0% {
        transform: translateX(-100px);
      }

      100% {
        transform: translateX(0px);
        opacity: 1;
      }
    }

    /* 定义向左滑动的动画 */
    @keyframes slideLeft {
      0% {
        transform: translateX(100px);
      }

      100% {
        transform: translateX(0px);
        opacity: 1;
      }
    }

    /* 定义向上滑动的动画 */
    @keyframes slideTop {
      0% {
        transform: translateY(100px);
      }

      100% {
        transform: translateY(0px);
        opacity: 1;
      }
    }

    /* 定义向下滑动的动画 */
    @keyframes slideBottom {
      0% {
        transform: translateY(-100px);
      }

      100% {
        transform: translateY(0px);
        opacity: 1;
      }
    }

    /* 定义放大的动画 */
    @keyframes zoomIn {
      0% {
        transform: scale(0);
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* 定义图片浮动的动画 */
    @keyframes floatImg {
      0% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-36px);
      }

      100% {
        transform: translateY(0);
      }
    }

    .img:hover{
      background-image:url("../static/img/wechat.jpg");
    }
  </style>
</head>

<body>
<header class="header">
  <!-- 网站Logo -->
  <a href="#" class="logo">
    Welcome!
  </a>
  <!-- 导航栏 -->
  <nav class="navbar">
    <!-- 导航栏选项1 -->
    <a href="/index.html"class="item " style="--i:1">首页</a>

  </nav>
</header>

<!-- 主页部分 -->
<section class="home">
  <!-- 主页内容 -->
  <div class="home-content">
    <!-- 主页标题 -->
    <h3>Hello,It's NoBug</h3>
    <h1>NoBug</h1>
    <!-- 主页小标题 -->
    <h3>小组介绍
      <!-- 小标题下的文本 -->
      <span class="text">
                </span>
    </h3>
    <!-- 主页正文 -->
    <p>NB</p>
    <!-- 社交媒体链接 -->
    <div class="social-media">
      <!-- 社交媒体链接1 -->
      <a href="https://www.douyin.com/user/MS4wLjABAAAARTJZ7tlxY-FOEoZtyPJn5hbyYf_-c21HO89PVUtRKHg" target="_blank" style="--i:7" ><i class="bx bxl-tiktok "></i></a>

      <!-- 社交媒体链接2 -->
      <a href="https://scan.erweicaihong.cn/0NVW" style="--i:8"  target="_blank"><i class='bx bxs-message-rounded' ></i></a>

      <!-- 社交媒体链接3 -->
      <a href="https://steamcommunity.com/profiles/76561199140325884/"  target="_blank" style="--i:9"><i class='bx bxl-steam' ></i></a>

      <!-- 社交媒体链接4 -->
      <a href="https://qm.qq.com/cgi-bin/qm/qr?k=2r8q_LfUUzri0y13PTSFV_zI8pHG_jD4&noverify=0"  target="_blank" style="--i:10"><i class='bx bxl-quora'></i></a>

    </div>

  </div>
  <!-- 主页图片 -->
  <div class="home-img">
    <img src="https://thumbnail1.baidupcs.com/thumbnail/cf7597b03na25482343fce3e0e28f8a5?fid=1101309887550-250528-901558872120128&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-3GFr%2f8emqRvHS%2fVLG9R%2b7bRs%2bgg%3d&expires=8h&chkbd=0&chkv=0&dp-logid=105629271341285566&dp-callid=0&time=1690074000&size=c1536_u864&quality=90&vuk=1101309887550&ft=image&autopolicy=1" alt="">
  </div>
</section>
<script src="jquery/jquery-3.6.0.js"></script>


<script>
  var text = document.querySelector('.text'); // 获取显示文本的元素
  var str = ['你好,我们是第一组:NOBUG组,一个正在努力提升我们的小组,感谢大家观看!']; // 要打印的字符串数组
  function writeText(t, delay = 200) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        text.innerHTML = t; // 显示当前字符串 t
        resolve(); // Promise 完成
      }, delay) // 延迟 delay 毫秒后执行
    })
  }

  async function main(str) {
    while (true) { // 无限循环
      for (let j = 0; j < str.length; j++) {
        // 写入
        for (let i = 0; i <= str[j].length; i++) {
          await writeText(str[j].substr(0, i)) // 显示当前字符串的前 i 个字符
        }
        // 回退
        // 回退前先等一秒
        await new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(); // 等待 1000 毫秒后 Promise 完成
          }, 1000) // 等待 1000 毫秒
        })
        for (let i = str[j].length; i >= 0; i--) {
          await writeText(str[j].substr(0, i), 200) // 显示当前字符串的前 i 个字符，间隔 200 毫秒
        }
      }
    }
  }
  main(str)


</script>
</body>

</html>